import React from "react";
import PropTypes from "prop-types";
import { List, InputItem, TextareaItem } from "@ali/ding-ui";

// components
import Select from "../../components/Select";
import DatePicker from "../../components/DatePicker/index";

//utils
import { validator } from "../../utils/form.js";

const Item = List.Item;

const IdentifyForm = ({ getFieldDecorator, getFieldProps, options, user }) => (
  <div className="steps-form iden-info">
    <div className="info-tit">根据你的身份证照片识别出以下信息，请确认信息并提交</div>
    <div className="identify-backgroud">
      <List className="step-two-list">
        <Item>
          {getFieldDecorator("name", {
            initialValue: user.name,
            rules: [{ required: true, validator, label: "姓名" }]
          })(
            <InputItem placeholder="请输入">
              <span className="step-one-required">*</span>身份证姓名
            </InputItem>
          )}
        </Item>
        <Item>
          {getFieldDecorator("certCode", {
            initialValue: user.certCode,
            rules: [{ required: true, validator, label: "身份证号" }]
          })(
            <InputItem placeholder="请输入" clear>
              <span className="step-one-required">*</span>证件号码
            </InputItem>
          )}
        </Item>
        {getFieldDecorator("birthday", {
          initialValue: user.birthday,
          rules: [{ required: true, validator, label: "出生日期" }]
        })(<DatePicker label="出生日期" required />)}

        {getFieldDecorator("sex", {
          initialValue: user.sex,
          rules: [{ required: true, validator, label: "性别" }]
        })(
          <Select options={options.sexType}>
            <span className="step-one-required">*</span>性别
          </Select>
        )}
        <Item>
          <TextareaItem
            title={
              <span>
                <span className="step-one-required">*</span>身份证地址
              </span>
            }
            autoHeight
            placeholder="请输入"
            {...getFieldProps("addressDetail", {
              initialValue: user.addressDetail,
              rules: [{ required: true, validator, label: "身份证地址" }]
            })}
          />
        </Item>
        {getFieldDecorator("expiry", {
          initialValue: user.expiry,
          rules: [{ required: true, validator, label: "证件有效期至" }]
        })(<DatePicker label="证件有效期至" required />)}
      </List>
    </div>
  </div>
);
IdentifyForm.defaultProps = {};
IdentifyForm.propTypes = {
  getFieldDecorator: PropTypes.func.isRequired,
  getFieldProps: PropTypes.func.isRequired,
  options: PropTypes.object,
  user: PropTypes.object
};
module.exports = IdentifyForm;
